﻿@using Site.Code.HtmlHelpers
@model NewsCrawler.Common.Models.ViewModels.IndexViewModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/Content/Style/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="/Content/Style/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="/Content/Style/grid.css" type="text/css" media="screen">
    <link rel="stylesheet" href="/Content/Style/prettyPhoto.css" type="text/css" media="screen">
    <link rel="stylesheet" href="/Content/Style/superfish.css" type="text/css" media="screen">
    <script src="/Scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="/Scripts/superfish.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.galleriffic.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.opacityrollover.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="/Scripts/hover-image.js" type="text/javascript"></script>
    <script src="/Scripts/flashobject.js" type="text/javascript"></script>
    <script src="/Scripts/tabs.js" type="text/javascript"></script>
    <script src="/Scripts/cufon-yui.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //for prettyPhoto
            $("a[data-gal^='prettyPhoto']").prettyPhoto({ theme: 'facebook' });
        });
    </script>
    <!--[if lt IE 7]>
   		<div style=' clear: both; text-align:center; position: relative;'> 
        	<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100//Content/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
        </div> 
	<![endif]-->
    <!--[if lt IE 9]>
   		<link rel="stylesheet" href="/Content/Style/ie.css" type="text/css" media="screen">
        <script type="text/javascript" src="/Scripts/html5.js"></script>
	<![endif]-->
</head>
<body id="page1">
    <div class="bg-top">
        <div class="main">
            <!--==============================header=================================-->
            <header>
                <div class="row-1">
                    <div class="wrapper">
                        <ul class="menu-right">
                            <li><a href="#">Sign In</a></li>
                            <li><a href="#">Help</a></li>
                            <li class="last"><a href="#">FAQs</a></li>
                        </ul>
                    </div>
                </div>
                <div class="bg-row">
                    <div class="row-2">
                        <ul class="menu">
                            <li class="first"><a href="#">News</a></li>
                            <li><a href="#">Weather</a></li>
                            <li><a href="#">Travel</a></li>
                            <li><a href="#">TV</a></li>
                            <li class="last"><a href="#">Radio</a></li>
                        </ul>
                        <h1>
                            <a class="logo" href="#">Sports NewsThe latest news in the world of sports</a></h1>
                        <form id="form-top" method="post" enctype="multipart/form-data">
                        <fieldset>
                            <div class="form-top">
                                <span>
                                    <input name="name" type="text" /></span> <a href="#" onclick="document.getElementById('form-top').submit()">
                                        Search</a>
                            </div>
                        </fieldset>
                        </form>
                    </div>
                    <div class="row-3">
                        <nav>
                            <ul class="sf-menu">
                                 @Html.CategoriesFor(Model.Categories)
                            </ul>
                        </nav>
                    </div>
                    <div class="row-4">
                    </div>
                </div>
            </header>
            @RenderBody()
            <aside>
                <div class="bg-aside">
                    <div class="container_24">
                        <div class="padding-5">
                            <div class="wrapper">
                                <article class="grid_3 alpha">
                                    <h3>
                                        Tools</h3>
                                    <ul class="list-2">
                                        <li><a href="#">Racing</a></li>
                                        <li><a href="#">Golf</a></li>
                                        <li><a href="#">Tennis</a></li>
                                        <li><a href="#">Boxing</a></li>
                                        <li><a href="#">MMA</a></li>
                                        <li><a href="#">Recruiting</a></li>
                                        <li><a href="#">Olympic Sports</a></li>
                                        <li><a href="#">Horse Racing</a></li>
                                    </ul>
                                </article>
                                <article class="grid_3 prefix_1">
                                    <h3>
                                        Scores</h3>
                                    <ul class="list-2">
                                        <li><a href="#">NFL</a></li>
                                        <li><a href="#">MLB</a></li>
                                        <li><a href="#">NBA</a></li>
                                        <li><a href="#">NHL</a></li>
                                        <li><a href="#">College Football</a></li>
                                        <li><a href="#">College Basketball</a></li>
                                        <li><a href="#">Soccer</a></li>
                                        <li><a href="#">NASCAR</a></li>
                                    </ul>
                                </article>
                                <article class="grid_4 prefix_1">
                                    <h3>
                                        Fantasy</h3>
                                    <ul class="list-2 p2">
                                        <li><a href="#">Football</a></li>
                                        <li><a href="#">Baseball</a></li>
                                        <li><a href="#">Streak for the Cash</a></li>
                                    </ul>
                                    <h3>
                                        Sportsnation</h3>
                                    <ul class="list-2">
                                        <li><a href="#">Profiles</a></li>
                                        <li><a href="#">Groups</a></li>
                                        <li><a href="#">Chats</a></li>
                                    </ul>
                                </article>
                                <article class="grid_3">
                                    <h3>
                                        Videos</h3>
                                    <ul class="list-2 p2">
                                        <li><a href="#">Most Recent</a></li>
                                        <li><a href="#">Highlights</a></li>
                                    </ul>
                                    <h3>
                                        The Life</h3>
                                    <ul class="list-2">
                                        <li><a href="#">Travel</a></li>
                                        <li><a href="#">Sports Passport</a></li>
                                        <li><a href="#">Arcade</a></li>
                                        <li><a href="#">Contests</a></li>
                                    </ul>
                                </article>
                                <article class="grid_3 prefix_1">
                                    <h3>
                                        Tools</h3>
                                    <ul class="list-2">
                                        <li><a href="#">Contact Us</a></li>
                                        <li><a href="#">Member Services</a></li>
                                        <li><a href="#">News Wire</a></li>
                                        <li><a href="#">Corrections</a></li>
                                        <li><a href="#">Widget Center</a></li>
                                        <li><a href="#">RSS</a></li>
                                    </ul>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
            <!--==============================footer=================================-->
            <footer>
                <div class="wrapper">
                    <div class="text-bot">
                        SportsNews &copy; 2011 <a href="#">Privacy Policy</a><br>
                        <!-- {%FOOTER_LINK} -->
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <script type="text/javascript">
        $(window).load(function () {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({ 'width': '262px', 'float': 'left' });
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity: onMouseOutOpacity,
                mouseOverOpacity: 1.0,
                fadeSpeed: 'fast',
                exemptionSelector: '.selected'
            });
        });
    </script>
</body>
</html>
